<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>视差滚动</title>
	<style>
		*{
			margin: 0;
			padding:0;
		}
		.scene{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.scene img{
			position: absolute;
			display: block;
			border:1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 5px #ccc;
		}
		#scene_back{
		}
		#scene_center{
		}
		#scene_front{

		}

		#pokemon1{
			width: 150px;
			top: 200px;
			left: 50px;
		}
		#pokemon2{
			width: 300px;
			left: 800px;
			top: 450px;
		}
		#pokemon3{
			top: 600px;
			left: 150px;
		}

		#pokemon4{
			width: 200px;
			left: 800px;
			top: 400px;
		}
		#pokemon5{
			width: 300px;
			left: 500px;
			top: 500px;
		}
		#pokemon6{
			top: 1200px;
		}

		#pokemon7{
			width: 150px;
			left: 250px;
			top: 550px;
		}
		#pokemon8{
			width: 300px;
			left: 100px;
			top: 900px;
		}
		#pokemon9{
			top: 1400px;
			left: 400px;
		}
	</style>
</head>
<body>
	<div id="scene_back" class="scene">
	    <img id="pokemon1" src="images/1.jpg">
	    <img id="pokemon4" src="images/4.jpg">
	    <img id="pokemon7" src="images/7.jpg">
	</div>

	<div id="scene_center" class="scene">
	    <img id="pokemon2" src="images/2.jpg">
	    <img id="pokemon5" src="images/5.jpg">
	    <img id="pokemon8" src="images/8.jpg">
	</div>

	<div id="scene_front" class="scene">
	    <img id="pokemon3" src="images/3.jpg">
	    <img id="pokemon6" src="images/6.jpg">
	    <img id="pokemon9" src="images/9.jpg">
	</div>

<script>
	var sceneBack = document.getElementById('scene_back'),
	       sceneCenter = document.getElementById('scene_center'),
	       sceneFront = document.getElementById('scene_front');

	       //每个div层的初始top值
	var old_top1 = 0,
	       old_top2 = 200,
	       old_top3 = 700;

	addEvent(window,'scroll',onScroll);
	onScroll();

	function onScroll(e){
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		//让每个层的top值变化不一样,从而达到运动速度上的视差效果
		sceneBack.style.top = old_top1+scrollTop*.9+'px';
		sceneCenter.style.top = old_top2+scrollTop*.7+'px';
		sceneFront.style.top = old_top3+scrollTop*.3+'px';
	}

	//浏览器兼容
   	function addEvent(eventTarget, eventType, eventHandler) {
	    if (eventTarget.addEventListener) {
	        eventTarget.addEventListener(eventType, eventHandler, false);
	    } else {
	        if (eventTarget.attachEvent) {
	            eventType = "on" + eventType;
	            eventTarget.attachEvent(eventType, eventHandler);
	        } else {
	            eventTarget["on" + eventType] = eventHandler;
	        }
	    }
    }
</script>
</body>
</html>